<template>
  <div class="app-container">
    <div class="statsDataShow">
      <div>
        <p>{{ memberInfoStats.placeOrderNumTotal }}</p>
        <div class="describe">
          <span>下单次数</span>
          <el-tooltip placement="top" popper-class="tip">
            <p slot="content">该用户在您的店铺活动及商品上单总数。</p>
            <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" width="1em" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
          </el-tooltip>
        </div>
      </div>
      <div>
        <p>{{ memberInfoStats.realityPayAmountTotal }}</p>
        <p>退款： {{ memberInfoStats.refundTotal }}</p>
        <div class="describe">
          <span>支付总金额(元)</span>
          <el-tooltip placement="top" popper-class="tip">
            <p slot="content">该用户在您的店铺支付总额，含退款金额。</p>
            <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" width="1em" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
          </el-tooltip>
        </div>
      </div>
      <div>
        <p>{{ Number(memberInfoStats.distributionNumberOneTotal) + Number(memberInfoStats.distributionNumberTwoTotal) }}</p>
        <p>1级： {{ memberInfoStats.distributionNumberOneTotal }}</p>
        <p>2级： {{ memberInfoStats.distributionNumberTwoTotal }}</p>
        <div class="describe">
          <span>分销笔数</span>
          <el-tooltip placement="top" popper-class="tip">
            <p slot="content">该用户在您的店铺产生的分销订单总数。此数值越大，表示该用户为您带来更多的订单。</p>
            <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" width="1em" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
          </el-tooltip>
        </div>
      </div>
      <div>
        <p>{{ Number(memberInfoStats.distributionAmountOneTotal) + Number(memberInfoStats.distributionAmountTwoTotal) }}</p>
        <p>1级： {{ memberInfoStats.distributionAmountOneTotal }}</p>
        <p>2级： {{ memberInfoStats.distributionAmountTwoTotal }}</p>
        <div class="describe">
          <span>分销佣金(元)</span>
          <el-tooltip placement="top" popper-class="tip">
            <p slot="content">该用户在您的店铺赚取的分销佣金总数。</p>
            <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" width="1em" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
          </el-tooltip>
        </div>
      </div>
    </div>
    <P class="infoTitle">用户信息</P>
    <div class="info">
      <div>微信昵称：{{ memberInfo.nickname }}</div>
      <div>
        姓名：{{ memberInfo.name }}
        <el-button type="text" icon="el-icon-edit" @click="goEditInfo('name')"></el-button>
      </div>
      <div>
        手机号：{{ memberInfo.mobile }}
        <el-button type="text" icon="el-icon-edit" @click="goEditInfo('mobile')"></el-button>
      </div>
      <div>加入时间：{{ parseTime(memberInfo.createTime) }}</div>
    </div>
    <div class="newOld">
      新/老客户：{{ memberInfo.newOfOld === 1 ? '新客':'老客' }}
      <el-button v-if="memberInfo.newOfOld == 2" size="mini" type="primary" @click="changeNewOrOld(1)">设为新客</el-button>
      <el-button v-if="memberInfo.newOfOld == 1" size="mini" type="primary" @click="changeNewOrOld(2)">设为老客</el-button>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="TA的行为" name="action">
        <el-form :model="actionQueryParams" ref="actionQueryParamsForm" :inline="true">
          <el-form-item label="活动/商品名称:" prop="productName">
            <el-input
              v-model="actionQueryParams.productName"
              placeholder="请输入活动/商品名称"
              clearable
              @keyup.enter.native="actionHandleQuery">
              <el-button circle slot="append" icon="el-icon-search" @click="actionHandleQuery"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item prop="enterTimeType">
            <el-select v-model="actionQueryParams.enterTimeType" placeholder="请选择">
              <el-option
                v-for="dict in dict.type.enter_time_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="actionQueryParams.dateRange"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="报名状态:" prop="enrollStatus">
            <el-select v-model="actionQueryParams.enrollStatus" placeholder="请选择" clearable>
              <el-option
                v-for="dict in dict.type.enroll_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" @click="actionHandleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="small" @click="actionResetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="actionDataList">
          <el-table-column type="selection" width="50"/>
          <el-table-column label="活动/商品名称" key="title" prop="title" width="350"/>
          <el-table-column label="首次进入时间">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="最近进入时间">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.latelyAccessTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="浏览次数" key="browseNumber" prop="browseNumber"/>
          <el-table-column label="累计浏览时长">
            <template slot-scope="scope">
              {{ scope.row.browseTimeLength | formatSeconds }}
            </template>
          </el-table-column>
          <el-table-column label="点击报名（购买）">
            <template slot-scope="scope">
              <span>{{ scope.row.isClickEnroll == 1 ? '未点击':'已点击' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="成功报名（购买）" key="enrollStatus" prop="enrollStatus">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.enroll_type" :value="scope.row.enrollStatus"/>
            </template>
          </el-table-column>
          <el-table-column label="操作" class-name="small-padding fixed-width" align="center">
            <template slot-scope="scope">
              <el-popover
                placement="top"
                width="200"
                trigger="click">
                <el-table :data="scope.row.orderList">
                  <el-table-column property="id" align="center" label="选择订单">
                    <template slot-scope="itemScope">
                      <router-link :to="'/order/detail/index/' + itemScope.row.id" class="link-type">
                        {{ '订单' + (itemScope.$index + 1) + '详情' }}
                      </router-link>
                    </template>
                  </el-table-column>
                </el-table>
                <el-button size="small" type="primary" slot="reference">查看详情</el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="actionTotal>0"
          :total="actionTotal"
          :page.sync="actionQueryParams.pageNum"
          :limit.sync="actionQueryParams.pageSize"
          @pagination="getActionDataList"
        />
      </el-tab-pane>
      <el-tab-pane label="TA的订单" name="order">
        <el-form :model="orderQueryParams" ref="orderQueryParamsForm" :inline="true">
          <el-form-item label="商品名称:" prop="goodsName">
            <el-input
              v-model="orderQueryParams.goodsName"
              placeholder="请输入商品名称"
              clearable
              @keyup.enter.native="orderHandleQuery">
              <el-button circle slot="append" icon="el-icon-search" @click="orderHandleQuery"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="订单状态:" prop="status">
            <el-select v-model="orderQueryParams.status" placeholder="请选择" clearable>
              <el-option
                v-for="dict in dict.type.order_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="资金状态:" prop="fundStatus">
            <el-select v-model="orderQueryParams.fundStatus" placeholder="请选择" clearable>
              <el-option
                v-for="dict in dict.type.fund_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="下单姓名:" prop="enrollName">
            <el-input
              v-model="orderQueryParams.enrollName"
              placeholder="请输入下单姓名"
              clearable
              @keyup.enter.native="orderHandleQuery">
              <el-button circle slot="append" icon="el-icon-search" @click="orderHandleQuery"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="报名时间:">
            <el-date-picker
              v-model="orderQueryParams.enrollDateRange"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" @click="orderHandleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="small" @click="orderResetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="orderDataList">
          <el-table-column type="selection" width="50"/>
          <el-table-column label="商品名">
            <template slot-scope="scope">
              <span v-if="scope.row.welfareName">{{ scope.row.welfareName }}</span>
              <span v-else>(未成团)</span>
            </template>
          </el-table-column>
          <el-table-column label="支付金额" prop="realityPayAmount">
            <template slot-scope="scope">
              <span v-if="scope.row.realityPayAmount">{{ scope.row.realityPayAmount }}元</span>
              <span v-else> - </span>
            </template>
          </el-table-column>
          <el-table-column label="订单状态" key="status" prop="status">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.order_type" :value="scope.row.status"/>
            </template>
          </el-table-column>
          <el-table-column label="佣金">
            <template slot-scope="scope">
              <span>{{ Number(scope.row.oneDistributionAmount) + Number(scope.row.twoDistributionAmount) }}元</span>
            </template>
          </el-table-column>
          <el-table-column label="手续费" prop="commission">
            <template slot-scope="scope">
              <span v-if="scope.row.commission">{{ scope.row.commission }}元</span>
              <span v-else> - </span>
            </template>
          </el-table-column>
          <el-table-column label="拼团信息" prop="personnelNumber">
            <template slot-scope="scope">
              <span v-if="scope.row.personnelNumber">{{ scope.row.personnelNumber }}人</span>
              <span v-else> - </span>
            </template>
          </el-table-column>
          <el-table-column label="实收" prop="actualAmount">
            <template slot-scope="scope">
              <span v-if="scope.row.actualAmount">{{ scope.row.actualAmount }}元</span>
              <span v-else> - </span>
            </template>
          </el-table-column>
          <el-table-column label="下单时间">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.orderCreateTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="下单姓名" prop="enrollName"/>
          <el-table-column label="下单手机号" prop="enrollMobile"/>
          <el-table-column label="操作" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <router-link :to="'/order/detail/index/' + scope.row.id" class="link-type">
                <el-button size="small" type="text">查看详情</el-button>
              </router-link>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="orderTotal>0"
          :total="orderTotal"
          :page.sync="orderQueryParams.pageNum"
          :limit.sync="orderQueryParams.pageSize"
          @pagination="getOrderDataList"
        />
      </el-tab-pane>
      <el-tab-pane label="TA的分销" name="distribution">
        <el-table v-loading="loading" :data="distributionDataList">
          <el-table-column type="selection" width="50"/>
          <el-table-column label="下单用户" prop="thirdNickname"/>
          <el-table-column label="下单商品" prop="goodsName"/>
          <el-table-column label="下单时间">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.orderCreateTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="支付金额" prop="realityPayAmount">
            <template slot-scope="scope">
              <span v-if="scope.row.realityPayAmount">{{ scope.row.realityPayAmount }}元</span>
              <span v-else> - </span>
            </template>
          </el-table-column>
          <el-table-column label="分销等级" prop="distributionGrade">
            <template slot-scope="scope">
              <span v-if="scope.row.distributionGrade == 1">一级分销</span>
              <span v-if="scope.row.distributionGrade == 2">二级分销</span>
              <span v-else> - </span>
            </template>
          </el-table-column>
          <el-table-column label="佣金金额" prop="kickback">
            <template slot-scope="scope">
              <span v-if="scope.row.kickback">{{ scope.row.kickback }}元</span>
              <span v-else> - </span>
            </template>
          </el-table-column>
          <el-table-column label="下单姓名" prop="enrollName"/>
          <el-table-column label="下单手机号" prop="enrollMobile"/>
          <el-table-column label="操作" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <router-link :to="'/order/detail/index/' + scope.row.thirdPlaceOrderId" class="link-type">
                <el-button size="small" type="text">查看详情</el-button>
              </router-link>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="distributionTotal>0"
          :total="distributionTotal"
          :page.sync="distributionQueryParams.pageNum"
          :limit.sync="distributionQueryParams.pageSize"
          @pagination="getDistributionDataList"
        />
      </el-tab-pane>
    </el-tabs>
    <el-dialog :title="editInfoTitle" :visible.sync="editInfoOpen" width="500px" append-to-body>
      <el-form ref="editInfoForm" :model="editInfoForm">
        <el-form-item v-if="editInfoTitle === '编辑姓名'">
          <el-input v-model="editInfoForm.name" placeholder="请输入想要编辑的内容" />
        </el-form-item>
        <el-form-item v-if="editInfoTitle === '编辑手机号'">
          <el-input v-model="editInfoForm.mobile" placeholder="请输入想要编辑的内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="editInfoSubmitForm">确 定</el-button>
        <el-button size="mini" @click="editInfoOpen = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {memberInfoStats, getMemberDetailById, updateMember, setMemberToNewOrOld,actionDataPageList,distributionDataPageList,orderDataPageList } from "@/api/triones/member";
export default {
  name: "memberInfo",
  dicts: ['enter_time_type','enroll_type','order_type','fund_status','new_or_old_member_type'],
  data() {
    return {
      loading: true,
      activeName: 'action',
      /** 行为列表 */
      actionQueryParams: {
        pageNum: 1,
        pageSize: 10,
        dateRange: [],
        productName: undefined,
        enterTimeType: '1',
        enrollStatus: undefined
      },
      actionDataList: [],
      actionTotal: 0,
      /** 订单列表 */
      orderQueryParams: {
        pageNum: 1,
        pageSize: 10,
        goodsName: undefined,
        status: undefined,
        fundStatus: undefined,
        enrollName: undefined,
        enrollDateRange: []
      },
      orderDataList: [],
      orderTotal: 0,
      /** 分销列表 */
      distributionDataList: [],
      distributionTotal: 0,
      distributionQueryParams: {
        pageNum: 1,
        pageSize: 10
      },
      /** 客户信息统计 */
      memberInfoStats: {
        placeOrderNumTotal: 0,
        realityPayAmountTotal: 0,
        refundTotal: 0,
        distributionNumberOneTotal: 0,
        distributionNumberTwoTotal: 0,
        distributionAmountOneTotal: 0,
        distributionAmountTwoTotal: 0,
      },
      /** 客户信息 */
      memberInfo: {
        id: undefined,
        nickname: undefined,
        name: undefined,
        mobile: undefined,
        createTime: undefined,
        newOfOld: undefined
      },
      /** 客户信息编辑 */
      editInfoTitle: '',
      editInfoOpen: false,
      editInfoForm: {
        id: undefined,
        name: undefined,
        mobile: undefined
      },
    }
  },
  filters: {
    formatSeconds(seconds) {
      var hours = Math.floor(seconds / 3600);
      seconds %= 3600;
      var minutes = Math.floor(seconds / 60);
      seconds %= 60;
      let hms = '';
      if (hours && hours != 0) {
        hms += hours + '小时'
      }
      if (minutes && minutes != 0) {
        hms  += minutes + '分'
      }
      if (seconds && seconds != 0) {
        hms  += seconds + '秒'
      }
      return hms;
    }
  },
  created() {
    const memberId = this.$route.params.id;
    this.getMemberInfoStats(memberId);
    this.getMemberDetail(memberId);
    this.getActionDataList();
  },
  methods: {
    /** 切换标签页 */
    handleTabClick(tab, event) {
      if (tab.name === 'action') {
        this.getActionDataList();
      }
      if (tab.name === 'order') {
        this.getOrderDataList();
      }
      if (tab.name === 'distribution') {
        this.getDistributionDataList();
      }
    },
    /** 获取用户信息 */
    getMemberDetail(memberId) {
      getMemberDetailById(memberId).then(response => {
        if (response.data) {
          this.memberInfo = response.data;
        }
      })
    },
    /** 用户信息统计 */
    getMemberInfoStats(memberId) {
      memberInfoStats(memberId).then(response => {
        this.memberInfoStats = response.data;
      })
    },
    /** 获取行为列表 */
    getActionDataList() {
      this.loading = true;
      const params = {
        memberId: this.$route.params.id,
        ...this.actionQueryParams
      }
      actionDataPageList(params).then(response => {
        this.actionDataList = response.rows;
        this.actionTotal = response.total;
        this.loading = false;
      })
    },
    /** 行为列表检索 */
    actionHandleQuery() {
      this.actionQueryParams.pageNum = 1;
      this.getActionDataList();
    },
    /** 行为请求参数重置 */
    actionResetQuery() {
      this.resetForm("actionQueryParamsForm");
      this.actionQueryParams.dateRange = [];
    },
    /** 去编辑用户 */
    goEditInfo(value) {
      this.editInfoForm = {
        id: undefined,
        name: undefined,
        mobile: undefined
      }
      this.editInfoForm.id = this.memberInfo.id;
      if (value === 'name') {
        this.editInfoForm.name = this.memberInfo.name;
        this.editInfoTitle = '编辑姓名';
      } else if (value === 'mobile') {
        this.editInfoForm.mobile = this.memberInfo.mobile;
        this.editInfoTitle = '编辑手机号';
      }
      this.editInfoOpen = true;
    },
    /** 提交编辑用户信息 */
    editInfoSubmitForm() {
      updateMember(this.editInfoForm).then(response => {
        this.$message.success("修改成功");
        this.getMemberDetail(this.editInfoForm.id);
        this.editInfoOpen = false;
      })
    },
    /** 设置客户新客/老客 */
    changeNewOrOld(value) {
      const newOrOld = value == 1 ? '新客' : '老客';
      this.$modal.confirm('确定设置为"' + newOrOld + '？').then(() => {
        setMemberToNewOrOld(this.memberInfo.id,value).then(response => {
          this.$message.success("操作成功");
          this.memberInfo.newOfOld = value;
        });
      })
    },
    /** 获取用户分销列表 */
    getDistributionDataList() {
      this.loading = true;
      const params = {
        memberId: this.$route.params.id,
        ...this.distributionQueryParams
      }
      distributionDataPageList(params).then(response => {
        this.distributionDataList = response.rows;
        this.distributionTotal = response.total;
        this.loading = false;
      })
    },
    /** 订单列表重置 */
    orderResetQuery() {
      this.resetForm("orderQueryParamsForm");
      this.actionQueryParams.dateRange = [];
    },
    /** 订单列表检索 */
    orderHandleQuery() {
      this.orderQueryParams.pageNum = 1;
      this.getOrderDataList();
    },
    /** 获取订单列表 */
    getOrderDataList() {
      this.loading = true;
      const params = {
        memberId: this.$route.params.id,
        ...this.orderQueryParams
      }
      orderDataPageList(params).then(response => {
        this.orderDataList = response.rows;
        this.orderTotal = response.total;
        this.loading = false;
      })
    }
  }
}
</script >

<style lang="scss" scoped>
::v-deep .el-tabs__nav-wrap::after {
  height: 0px;
}

.statsDataShow {
  position: relative;
  > div {
    padding-top: 10px;
    > p {
      padding-left: 20px;
      margin: 5px 0 5px 0;
      font-size: 14px;
    }
  }
}

.describe {
  position: absolute;
  bottom: 35px;
  padding-left: 20px;
  span {
    font-size: 14px;
    text-align: left;
  }
  svg {
    margin-left: 7px;
    vertical-align : middle;
    width: 13px;
  }
  button {
    padding: 0 0 0 10px;
  }
}

.tip {
  p {
    width: 200px;
    min-height: 30px;
    font-size: 14px;
    margin: 5px 0;
  }
}

.infoTitle {
  font-size: 18px;
}

.info {
  display: flex;
  padding: 20px 0 20px 20px;
  font-size: 14px;
  > div {
    width: 25%;
    align-content: center;
  }
}
.newOld {
  padding: 20px 0 20px 20px;
  font-size: 14px;
}
</style>
